<template>
	<view class="content">
		<!-- <view class="inps">
			<view class="key">订单号</view>
			<view class="value">
				<input type="text" v-model="form.issue" class="inp" placeholder="输入订单号"/>
			</view>
		</view> -->
		<view class="inps">
			<view class="key">工单标题</view>
			<view class="value">
				<input type="text" v-model="form.issue" class="inp" placeholder="输入工单标题"/>
			</view>
		</view>
		<view class="inps" @click="show=true">
			<view class="key">工单类型</view>
			<view class="value">
				<input type="text" v-model="form.typeName" class="inp" placeholder="选择工单类型" disabled/>
				<u-icon name="arrow-right" style="margin-left: 24rpx;"></u-icon>
			</view>
		</view>
		<view class="inpss">
			<view class="key">工单内容</view>
			<view class="value">
				<textarea name="" id="" v-model="form.content" cols="30" rows="10" class="inp" placeholder="请填写工单内容" maxlength="-1"></textarea>
			</view>
		</view>
		<view class="inpss">
			<view class="key">图片 <text style="margin-left: 20rpx;font-size: 20rpx;color: #999999;">* 最多上传5张</text></view>
			<view class="value">
				<u-upload :action="action" :file-list="fileList" max-count="5" :header="header" @on-success="success"></u-upload>
			</view>
		</view>
		<view class="btn" @click="enter">提交</view>
		
		
		<u-select v-model="show" :list="list" @confirm="confirm" show-progress="false"></u-select>
	</view>
</template>

<script>
	import request from '../../common/common.js'
	import { workOrderAdd } from '../../common/api.js'
	export default {
		data() {
			return {
				action:request.imgUrl+'/api/wechat/file/upload',
				fileList: [],
				header:{
					authorization:'Bearer '+uni.getStorageSync("token")
				},
				form:{
					order_id:'',
					issue:'',
					typeName:'',
					type:'',
					content:'',
					urls:[]
				},
				
				show:false,
				list:[
					{
						value: '1',
						label: '催取件'
					},
					{
						value: '2',
						label: '重量异常'
					},
					{
						value: '3',
						label: '虚假取件'
					},
					{
						value: '7',
						label: '签收未收到货'
					},
					{
						value: '8',
						label: '错件'
					},
					{
						value: '9',
						label: '催物流'
					},
					{
						value: '10',
						label: '催派送'
					},
					{
						value: '13',
						label: '核实退回原因'
					},
					{
						value: '14',
						label: '物流停滞'
					},
					{
						value: '15',
						label: '重新分配快递员'
					},
					{
						value: '16',
						label: '取消运单'
					}
				]
			}
		},
		onLoad(e) {
			this.form.order_id = e.orderId
		},
		methods: {
			enter(){
				
				// return
				console.log(this.form)
				workOrderAdd(this.form).then(res=>{
					console.log(res)
					if(res.code==10000){
						uni.showToast({
							title: '提交成功',
							duration: 2000,
							icon:"none"
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
							
						},500)
					}
				})
			},
			confirm(e){
				console.log(e)
				this.form.type=e[0].value
				this.form.typeName=e[0].label
			},
			success(data, index, lists, name){
				console.log(data, index, lists, name)
				if(data.code==10000){
					// let obj = {
					// 	url:data.data.url
					// }
					// this.fileList.push(obj)
					console.log(this.fileList)
					this.form.urls.push(data.data.url)
					
				}
			}
		}
	}
</script>
<style>
	page{
		background: #EDEFF2;
	}
</style>
<style scoped lang="scss">
.content{
	width: 750rpx;
	padding: 32rpx;
	box-sizing: border-box;
	.btn{
		width: 100%;
		height: 88rpx;
		background: #1AA261;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		margin-top: 50rpx;
	}
	.inpss{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 40rpx 20rpx 40rpx;
		margin-bottom: 24rpx;
		.key{
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
		}
		.value{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.inp{
				// text-align: right;
				font-size: 28rpx;
			}
		}
	}
	.inps{
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		.key{
			
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
		}
		.value{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.inp{
				height: 80rpx;
				text-align: right;
				font-size: 28rpx;
			}
		}
	}
}
</style>
